<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="视频名称" prop="videoName">
        <el-input
          v-model="queryParams.videoName"
          placeholder="请输入视频名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="是否付费" prop="isFree">
        <el-select v-model="queryParams.isFree" placeholder="请选择是否付费" clearable size="small">
          <el-option
            v-for="dict in isFreeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否删除" prop="isDelete">
        <el-select v-model="queryParams.isDelete" placeholder="请选择是否删除" clearable size="small">
          <el-option
            v-for="dict in isDeleteOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="类型" prop="videoType">
        <el-select v-model="queryParams.videoType" placeholder="请选择类型" clearable size="small">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核" prop="isCheck">
        <el-select v-model="queryParams.isCheck" placeholder="审核" clearable size="small">
          <el-option
            v-for="dict in isCheckOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否置顶" prop="isTop">
        <el-select v-model="queryParams.isTop" placeholder="请选择是否置顶" clearable size="small">
          <el-option
            v-for="dict in isTopOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否推荐" prop="isRecommend">
        <el-select v-model="queryParams.isRecommend" placeholder="请选择是否推荐" clearable size="small">
          <el-option
            v-for="dict in isRecommendOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:content:add']"
        >新增</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['content:content:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:content:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:content:export']"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="contentList" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键" align="center" prop="id" />
      <el-table-column label="视频名称" align="center" prop="videoName" />
      <el-table-column label="地址" align="center" :show-overflow-tooltip="true" prop="url" />
      <el-table-column label="描述" align="center" :show-overflow-tooltip="true" prop="detail" />
      <el-table-column label="播放量" align="center" prop="num" />
      <el-table-column label="是否付费" align="center" prop="isFree" :formatter="isFreeFormat" />
      <el-table-column label="价格" align="center" prop="price" />
      <el-table-column label="是否删除" align="center" prop="isDelete" :formatter="isDeleteFormat" />
      <el-table-column label="创建者" align="center" prop="createUsername" />
      <el-table-column label="分类" v-if="false" align="center" prop="category" />
      <el-table-column label="分类" align="center" prop="categoryName" />
      <el-table-column label="类型" align="center" prop="videoType" />
      <el-table-column label="审核" align="center" prop="isCheck" :formatter="isCheckFormat" />
      <el-table-column label="是否置顶" align="center" prop="isTop" :formatter="isTopFormat" />
      <el-table-column label="是否推荐" align="center" prop="isRecommend" :formatter="isRecommendFormat" />
      <el-table-column label="广告" align="center" prop="adId" />
      <el-table-column label="免费时长(S)" align="center" prop="freeTime" />
      <el-table-column label="封面图片" align="center" :show-overflow-tooltip="true" prop="poster" />
      <el-table-column label="相片集合" align="center" :show-overflow-tooltip="true" prop="imageId" />
      <el-table-column label="操作" align="center"  fixed="right"
                       width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:content:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:content:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:content:check']"
          >审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改视频管理对话框 -->
    <el-dialog :title="title" :visible.sync="open"  @close='closeDialog'  append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item v-show="false"  label="id"  prop="id">
            <el-input v-model="form.id"  placeholder="id" />
          </el-form-item>
        
           <video style=" width: 100%;height: auto;border: 5px solid; border-radius: 20px;"    v-if="this.showVideoPath !='' && !videoFlag"  :src="this.url"  class="avatar video-avatar" controls="controls">
                  您的浏览器不支持视频播放
                </video>
         <input type="file" style="height: 60px;line-height: 50px;margin: 10px;" name="fileToUpload" id="fileToUpload" @change="fileSelected($event)">
         <!-- <el-input  type="file" class="upload-input"  name="fileToUpload" id="fileToUpload" v-model="input" @change="fileSelected($event)" placeholder="请输入内容"></el-input> -->

            <div style="width:60%;margin-left: 10px;">
                 <p>上传进度：</p>
                <el-progress :percentage="percent" :stroke-width=10></el-progress>
              </div>
            <!-- <el-progress :stroke-width="10" class="progressType" v-if="videoFlag == true"
                         type="circle" :percentage="videoUploadPercent" style="margin-top:30px;">
            </el-progress> -->
        
          <el-form-item label="视频名称" prop="videoName">
            <el-input v-model="form.videoName" placeholder="请输入视频名称" />
          </el-form-item>
          <el-form-item label="地址" prop="url">
            <el-input class="nameInput"  v-model="form.url" placeholder="地址自动生成，不需填写" readonly />
          </el-form-item>
          <el-form-item label="描述" prop="detail">
            <el-input v-model="form.detail" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="选择平台艺人" prop="createUser">
            <el-form-item v-show="false" label="选择平台艺人"  prop="createUser">
              <el-input class="nameInput"  v-model="form.createUser" placeholder="地址自动生成，不需填写" readonly />
            </el-form-item>
            <el-row :gutter="0">
              <el-carousel height="430px" type="card" :autoplay="false">
                <el-carousel-item v-for="(item,index) in peopleList" :key="item.id">
                  <div class="swiper-item"  @click="istrue=selectPeople(item,index)">
                    <el-card :body-style="{ padding: '0px' }" :class="{active:istrue==index}"  >
                      <img style="width: 100%;height:300px" :src="item.mainPhoto"  class="image">
                      <div style="padding: 14px;">
                        <span>{{item.userName}}</span>
                        <div class="bottom clearfix">
                          <el-button type="text" class="button">点击选择平台艺人</el-button>
                        </div>
                      </div>
                    </el-card>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </el-row>
          </el-form-item>

          <el-form-item label="分类" prop="category">
            <el-select
              v-model="form.category"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择分类">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否付费" prop="isFree">
            <el-radio-group v-model="form.isFree">
              <el-radio
                v-for="dict in isFreeOptions"
                :key="dict.dictValue"
                :label="parseInt(dict.dictValue)"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-show="form.isFree!=1"  label="价格" prop="price">
            <el-input v-model="form.price"  placeholder="请输入价格" />
          </el-form-item>
          <el-form-item label="审核">
            <el-radio-group v-model="form.isCheck">
              <el-radio
                v-for="dict in isCheckOptions"
                :key="dict.dictValue"
                :label="parseInt(dict.dictValue)"
                v-hasPermi="['system:content:check']"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否置顶">
            <el-radio-group v-model="form.isTop">
              <el-radio
                v-for="dict in isTopOptions"
                :key="dict.dictValue"
                :label="parseInt(dict.dictValue)"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否推荐">
            <el-radio-group v-model="form.isRecommend">
              <el-radio
                v-for="dict in isRecommendOptions"
                :key="dict.dictValue"
                :label="parseInt(dict.dictValue)"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
            <el-form-item label="视频类型">
            <el-radio-group v-model="form.videoType">
              <el-radio
                v-for="dict in videoType"
                :key="dict.dictValue"
                :label="parseInt(dict.dictValue)"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="插入广告" prop="adId">
<!--            <el-select v-model="form.adId" placeholder="选择广告">-->
<!--              <el-option label="请选择字典生成" value="" />-->
<!--            </el-select>-->
            <el-input v-model="form.adId" placeholder="免费时长(S)" />
          </el-form-item>
          <el-form-item label="免费时长s为单位" prop="freeTime">
            <el-input v-model="form.freeTime" placeholder="免费时长(S)" />
          </el-form-item>
          <el-form-item label="封面图片" prop="poster">
            <el-upload
              :headers="videoUpload.headers"
              :action="videoUpload.url"
              :file-list="poster"
              list-type="picture-card"
              :before-upload="limit_1"
              :on-success="handlePagePhotoSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handlePagePhotoRemove"
              accept=".jpg,.jpeg,.png,,.JPG,.JPEG"
              :limit="1">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="相片集合" prop="imageId">
            <el-upload
              :headers="videoUpload.headers"
              :action="videoUpload.url"
              :file-list="imageId"
              list-type="picture-card"
              :before-upload="limit_10"
              :on-success="handlePhotoSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleimageIdRemove"
              accept=".jpg,.jpeg,.png,,.JPG,.JPEG"
              :limit="10">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" class="my-dialog">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>

    </el-dialog>
  </div>
</template>

<script>
  import { uploadFile,listContent, getContent, delContent, addContent, updateContent, exportContent } from "@/api/content/content";
  import { getToken } from '@/utils/auth'
  import { listCategory } from "@/api/content/category";
  import { listPeople, getPeople } from "@/api/content/people";
  import {getUploadToken} from  "@/api/content/upload"
  //导入七牛云sdk
 import * as qiniu from 'qiniu-js';
  export default {
  name: "Content",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 视频管理表格数据
      contentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否付费字典
      isFreeOptions: [],
      // 是否删除字典
      isDeleteOptions: [],
      // 审核1是审核0是未审核2是拒绝3是下架字典
      isCheckOptions: [],
      // 是否置顶字典
      isTopOptions: [],
      videoType:[],
      // 是否推荐字典
      isRecommendOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        videoName: undefined,
        url: undefined,
        detail: undefined,
        isFree: undefined,
        price: undefined,
        isDelete: undefined,
        createUser: undefined,
        createUsername: undefined,
        category: undefined,
        videoType: undefined,
        isCheck: undefined,
        isTop: undefined,
        isRecommend: undefined,
        adId: undefined,
        freeTime: undefined,
        poster: undefined,
        imageId: undefined
      },
      // 表单参数
      form: {

      },
      // 表单校验
      rules: {
        videoName :[{required: true, message: '必填项目', trigger: 'blur'}],
        isFree :[{required: true, message: '必填项目', trigger: 'blur'}],
        url :[{required: true, message: '必填项目', trigger: 'blur'}],
        category :[{required: true, message: '必填项目', trigger: 'blur'}],
        poster :[{required: true, message: '必填项目', trigger: 'blur'}],
        imageId :[{required: true, message: '必填项目', trigger: 'blur'}],
        createUser:[{required: true, message: '必填项目', trigger: 'blur'}],
        createUser:[{required: true, message: '必填项目', trigger: 'blur'}],
      },
      videoUpload:{
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/sys/file/upload",
        url2: process.env.VUE_APP_BASE_API,
      },
      showVideoPath: "",
      uploadUrl:"",//你要上传视频到你后台的地址
      videoFlag:false , //是否显示进度条
      videoUploadPercent:"", //进度条的进度，
      isShowUploadVideo:false, //显示上传按钮，
      dialogImageUrl: '',
      dialogVisible: false,
      poster:[],
      imageId:[],
      url:"",
      categoryList:[],
      istrue: null,
      people:"",
      peopleList:[],
      percent:0 //上传进度
    };
  },
  created() {
    this.getList();
    this.getDicts("video_free").then(response => {
      this.isFreeOptions = response.data;
    });
    this.getDicts("video_delete").then(response => {
      this.isDeleteOptions = response.data;
    });
    this.getDicts("video_is_check").then(response => {
      console.log("获取字典")
      console.log(response.data)
      this.isCheckOptions = response.data;
    });
    this.getDicts("video_is_top").then(response => {
      this.isTopOptions = response.data;
    });
    this.getDicts("video_is_rec").then(response => {
      this.isRecommendOptions = response.data;
    });
    this.getDicts("video_type").then(response => {
      this.videoType = response.data;
    });
    this.getCategoryList();
    this.getPeopleList();
  },
  methods: {
    /** 查询视频管理列表 */
    getList() {
      JSON.stringify()
      this.loading = true;
      listContent(this.queryParams).then(response => {
        this.contentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    async getPeopleList() {
      this.loading = true;
      await listPeople(this.queryParams).then(response => {
        this.peopleList = response.rows;
        this.solveMain(this.peopleList)
        console.log(this.peopleList)
        this.total = response.total;
        this.loading = false;
      });
    },
    solveMain(v){
      for (let i=0;i<v.length;i++){
        v[i].mainPhoto = JSON.parse(v[i].mainPhoto)[0]
       }
    },
    async getPeopleById(id) {
      this.loading = true;
      await this.getPeopleList();
      let list = this.peopleList;
      this.peopleList = new Array();
      this.istrue = 0;//显示第一张
      getPeople(id).then(response => {
        this.people = response.data;
        this.people.mainPhoto = JSON.parse(this.people.mainPhoto)[0];
        console.log("id" + this.people.id)
        for (let i = 0; i < list.length; i++) {
          if (this.people.id != list[i].id) {
            this.peopleList.push(list[i])
          }
        }
        this.peopleList.push(this.people);
        this.peopleList.reverse();
        console.log("list")
        console.log(this.peopleList)

        this.loading = false;
      });
    },
    async getCategoryList() {
      this.loading = true;
      await listCategory(this.queryParams).then(response => {
        console.log("获取分类")
        this.categoryList = response.rows;
         console.log(this.categoryList)
        this.total = response.total;
        this.loading = false;
      });
    },

    // 是否付费字典翻译
    isFreeFormat(row, column) {
      return this.selectDictLabel(this.isFreeOptions, row.isFree);
    },
    // 是否删除字典翻译
    isDeleteFormat(row, column) {
      return this.selectDictLabel(this.isDeleteOptions, row.isDelete);
    },
    // 审核1是审核0是未审核2是拒绝3是下架字典翻译
    isCheckFormat(row, column) {
      return this.selectDictLabel(this.isCheckOptions, row.isCheck);
    },
    // 是否置顶字典翻译
    isTopFormat(row, column) {
      return this.selectDictLabel(this.isTopOptions, row.isTop);
    },
    // 是否推荐字典翻译
    isRecommendFormat(row, column) {
      return this.selectDictLabel(this.isRecommendOptions, row.isRecommend);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: "",
        videoName: "",
        url: "",
        detail: "",
        isFree: 1,
        price: 0,
        createTime: "",
        updateTime: "",
        isDelete: "",
        createUser: "",
        createUsername: "",
        category: "",
        videoType: "",
        isCheck: 1,
        isTop: 0,
        isRecommend: 0,
        adId: "",
        freeTime: "",
        poster: "",
        imageId: "",
        num:"",
      };
      this.istrue = null;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.getCategoryList();
      this.getPeopleList();
      this.reset();
      this.open = true;
      this.form.id ="add";//表示新增
      this.title = "添加视频管理";
      this.notPlay();
      this.percent = 0;

    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      console.log("点击上方更新")
      console.log(row)
        this.percent = 100;
      await this.getCategoryList();
      this.reset();
      await this.getPeopleById(parseInt(row.createUser));
      const id = row.id || this.ids
      await getContent(id).then(response => {
        console.log(response.data)
        this.form = response.data;
        this.url = response.data.url;
        this.poster = JSON.parse(response.data.poster).map(item => {
          return {
            url: item
          }
        });
        this.imageId = JSON.parse(response.data.imageId).map(item => {
          return {
            url: item
          }
        });
        this.form.category = response.data.listCategory;
        this.canPlay()
        this.open = true;
        this.title = "修改视频管理";
      });

    },
    upload:function(file){
     //上传文件
      uploadFile(file)
    },
    /** 提交按钮 */
    submitForm: function() {
      this.form.category =JSON.stringify( this.form.category);
      this.form.poster = JSON.stringify(this.getUrl(this.poster));
      this.form.imageId =JSON.stringify(this.getUrl(this.imageId));
      this.form.url = this.url
      this.$refs["form"].validate(valid => {
        // if (this.form.price!=0){
        //   if (this.form.price.replace(/(^s*)|(s*$)/g, "").length ==0){
        //     if (this.form.isFree==0){
        //       this.msgError("价格不能为空");
        //       return
        //     }
        //   }
        // }
        if (valid) {
          console.log("表单id"+this.form.id)
          if (this.form.id!="add") {
            updateContent(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            this.form.id = ""
            addContent(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除视频管理编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delContent(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有视频管理数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportContent(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    },
    //上传前回调
    beforeUploadVideo(file) {
      const isLt1024M = (file.size / 1024 / 1024) < 1024;
      this.form.videoSize = file.size / 1024 / 1024;
      //判断是不是MP4格式视频
      // if (['video/mp4'].indexOf(file.type) != 0) {
      //   this.$message.error('请上传正确的视频格式');
      //   return false;
      // }
      //单个视频大小限制在1024M以内
      if (!isLt1024M ) {
        this.$message.error('上传视频大小不能超过1024MB哦!');
        return false;
      }
      this.isShowUploadVideo = false;
    },

    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
     canPlay(){
       this.isShowUploadVideo = true;
       this.videoFlag = false;
       this.videoUploadPercent = 0;
       this.showVideoPath = this.url;
     },
    notPlay(){
      this.poster = [];
      this.imageId =[];
      this.url = '';
      this.videoFlag =false;
      this.videoUploadPercent = 0;
      this.showVideoPath = "";
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      console.log("上传成功地址"+res)
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if(res !=""){
        this.showVideoPath = res.url;
        this.form.courseUrl = res.url;
        this.form.url = res.url;
        this.form.m3u8Url = res.m3u8Url;
        this.url = res.url;//上传返回地址
      } else {
        this.$message.error('视频上传失败，请重新上传！');
      }
    },

    handlePagePhotoRemove(file, fileList) {
      console.log(this.poster)
      console.log(fileList)
      console.log(file);
      this.poster = fileList;
    },

    handleimageIdRemove(file, fileList){
      console.log(this.poster)
      console.log(fileList)
      console.log(file);
         this.imageId = fileList;
    },
    //封面
    handlePagePhotoSuccess(res, file){
      this.poster.push(file)
    },
    //相册集合
    handlePhotoSuccess(res, file){
      console.log(res)
      console.log(file)
      this.imageId.push(file)
    },
    handlePictureCardPreview(file) {
      console.log("预览")
      console.log( file.url)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    getUrl(v){
      var  arr = new Array();
      for (var i =0;i<v.length;i++){
        console.log("是否存在"+v[i].response)
         if (v[i].response==null||v[i].response==undefined){
           arr.push(v[i].url)
         }else {
           arr.push(v[i].response.url)
         }
      }
      return arr;
    },
    limit_1(file){
      this.poster.length>1;
      this.msgInfo("只能上传1张图片")
    },

    limit_10(file){
      this.imageId.length>10;
      this.msgInfo("最多上传10张图片")
    },
    //关闭Dialog
    closeDialog(){
      this.reset();
      this.notPlay()
    },
    selectPeople(item,index){
      console.log("选择艺人"+item)
      console.log("索引"+index)
      this.form.createUser = item.id
      this.msgInfo("您选中"+item.userName+"艺人")
      return index
    },
    dblclick(item,index){
      console.log("取消选择艺人"+item)
      console.log("取消索引"+index)
      this.form.createUser = ""
      this.msgError("取消选中"+item.userName+"艺人")
      return "";
    },
    getIndex(item,index,people){
      //判断是否是空
      return this.istrue
    },
      fileSelected(e){
       let file = e.target.files[0];
       console.log(file)
       this.zh_uploadFile_change(e)
    },
    zh_uploadFile_change(evfile){
      //后端获取token
      var  formData = new FormData();
      formData = {
        key: evfile.target.files[0].name
      }
        getUploadToken(formData).then(response=>{
          console.log(response)
        var file = evfile.target.files[0] //Blob 对象，上传的文件
        var key = file.name  // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。

        let config = {
          useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
          region: null     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
        };

        let putExtra = {
          fname: "",  //文件原文件名
          params: {}, //用来放置自定义变量
          mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        var observable = qiniu.upload(file, formData.key, response.data.token, putExtra, config);
           observable.subscribe({
             next: (result) => {
          // 主要用来展示进度
            console.log(result)
            console.log(result.total.percent)
            this.percent = parseInt(result.total.percent)
          },
          error: (errResult) => {
          // 失败报错信息
            console.log(errResult)
          },
          complete: (result) => {
          // 接收成功后返回的信息 this.showVideoPath videoFlag
            console.log(result)
            this.showVideoPath = response.data.uploadUrl
            this.videoFlag = false;
            this.url = response.data.uploadUrl+"/"+result.key
            this.form.url =  this.url;
          }
           })
        })
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-upload-dragger{
    width: 200px;
    height: 162px;
  }
  .nameInput input.el-input__inner {
    background-color: lightgray;
  }
  .swiper-item{
    height: 280px;
    background-color: lightgray;
    box-shadow: 1px 2px 3px 4px saddlebrown;
  }
  .active {
    border: 4px solid #50963a;

  }
  .my-dialog{
    margin-left: 56%;
  }

</style>
